<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kertext UI模态框示例页面</title>
    <link rel="stylesheet" href="kertext.css">
</head>
<body>
    <div class="kertext-container">
        <h1 class="kertext-heading">Kertext UI模态框示例页面</h1>
        <p class="kertext-paragraph">点击下面的按钮打开模态框。</p>
        <button class="kertext-button" id="open-modal-btn">打开模态框</button>
        <a class="kertext-button" id="theme-switcher">切换主题</a>
    </div>

    <!-- 模态框 -->
    <div class="kertext-modal" id="modal">
        <div class="kertext-modal-dialog">
            <div class="kertext-modal-header">
                <h3>标题</h3>
                <span class="kertext-modal-close">&times;</span>
            </div>
            <div class="kertext-modal-body">
                <p class="kertext-paragraph">这里是模态框的内容。这里是模态框的内容。</p>
            </div>
            <div class="kertext-modal-footer">
                <button class="kertext-button" id="close-modal-btn">关闭</button>
            </div>
        </div>
    </div>

    <script>
        const openModalBtn = document.getElementById('open-modal-btn');
        const closeModalBtn = document.getElementById('close-modal-btn');
        const modal = document.getElementById('modal');
        const modalClose = modal.querySelector('.kertext-modal-close');

        // 打开模态框
        openModalBtn.addEventListener('click', () => {
            modal.style.display = 'flex';
        });

        // 关闭模态框
        closeModalBtn.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        // 点击关闭图标关闭模态框
        modalClose.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        // 主题切换
        document.getElementById('theme-switcher').addEventListener('click', function () {
            var body = document.body;
            if (body.getAttribute('data-theme') === 'dark') {
                body.removeAttribute('data-theme');
            } else {
                body.setAttribute('data-theme', 'dark');
            }
        });
    </script>
</body>
</html>
